<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>在线问答系统-文章详情</title>

  <!-- Bootstrap -->
  <link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
      <script src="/assets/plugins/html5shiv.min.js"></script>
      <script src="/assets/plugins/respond.min.js"></script>
    <![endif]-->
  <link rel="stylesheet" href="/assets/style/common.css">
  <link rel="stylesheet" href="/assets/style/detail.css">
</head>

<body class="layout">
  <!-- 顶部导航 -->
  <div class="layout-header">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#id-index-banner"
            aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">在线问答系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="id-index-banner">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">话题</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="搜索话题">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">提问</a></li>
            <li><a href="#">消息</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">个人中心 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="../../accounts/templates/mine.html">我的主页</a></li>
                <li><a href="../../accounts/templates/mine.html">设置</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">退出</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>
  <!-- // 顶部导航 -->

  <!-- 问题简述 -->
  <div class="layout-question">
    <div class="container">
      <div class="row">
        <div class="col-md-9">
        {% include 'components/flash_messages.html' %}
          <!-- 问题标签 -->
          <ul class="que-tag-ls">
              {% for item in question_tag %}
                  <li><a href="#">{{ item.tag_name }}</a></li>
              {% endfor %}
          </ul>
          <!-- // 问题标签 -->
          <h3>{{ question.title }}</h3>
          <div class="show-desc hidden">
            {{ question.desc|d('暂无',true) }}
            <span class="btn-show-more">显示全部<i class="glyphicon glyphicon-menu-down"></i></span>
          </div>
          <div class="show-all ">
              {% autoescape false %}
              {{ question.content|safe }}
              {% endautoescape %}
            <span class="btn-show-less">收起<i class="glyphicon glyphicon-menu-up"></i></span>
          </div>
          <!-- 菜单栏 -->
          <div class="qa-footer">
            <div>
              <button type="button" class="btn btn-info btn-sm">关  注</button>
            </div>
            <div>
              <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#addComment">写回答</button>
            </div>
{#              问题的评论数#}
            <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
            <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
            <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
            <div class="txt-menu"></div>
            <div class="txt-menu btn-group">
              <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false"></i>
              <ul class="dropdown-menu">
                <li><a href="#">不感兴趣</a></li>
              </ul>
            </div>
          </div>
          <!-- //菜单栏 -->
        </div>
        <div class="col-md-3">
          <div class="que-stats-box">
            <!-- 关注者 -->
            <div>
              <span>关注者</span>
              <strong>{{ question.question_follow|number_split }}</strong>
            </div>
            <!-- //关注者 -->
            <!-- 被浏览 -->
            <div>
              <span>被浏览</span>
              <strong>{{ question.view_count|number_split }}</strong>
            </div>
            <!-- //被浏览 -->
          </div>
        </div>
      </div><!-- // row -->
    </div>
  </div>
  <!-- // 问题简述 -->

  <div class="layout-answer">
    <div class="container">
      <div class="row">
        <div class="col-md-9 left-content">
{#            问题回答的数量#}
          <a class="link-more" href="#">查看全部 {{ question.answer_count|number_split }} 个回答</a>
          <!-- 回答内容区域 -->
{#            如果问题存在，才给展示问题出来 #}
            {% if answer %}
          <div class="answer-content box-wrap">
            <div class="user-info">
              <div class="avater">
{#                  如果用户有头像，即img#}
                  {% if answer.user.avater %}
                <img src="{{ answer.user.avater }}" alt="用户头像">
                  {% else %}
                <img src="/assets/home/qa/user_head.jpg" alt="用户头像">
                  {% endif %}
              </div>
              <div class="desc">
{#                  回答的用户名#}
                <h4>{{ answer.user.nickname }}</h4>
{#                  用户的格言#}
                <p>{{ answer.user.maxim }}</p>
              </div>
            </div>
            <div class="answer-stats">{{ answer.answer_love|number_split }} 人赞同了该回答</div>
<!--            <div class="answer-stats">{{ answer.answer_love }} 人赞同了该回答</div>-->
            <div class="answer-txt">
              {% autoescape false %}
              {{ answer.content|safe }}
              {% endautoescape %}
              <p class="ztext-empty-paragraph"><br></p>

            </div>
            <div class="answer-time">发布于 {{ answer.created_at }}</div>

            <!-- 底部菜单 -->
            <div class="qa-footer">
              <div><button type="button" class="btn btn-info btn-sm">
{#                  问题点赞的数据  #}
                  <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 {{ answer.answer_love|number_split }}</button>
                <button type="button" class="btn btn-info btn-sm"><i
                    class="glyphicon glyphicon-thumbs-down"></i></button>
              </div>
{#                问题回答的评论数#}
              <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> {{ answer.answer_comment_count|number_split }}条评论</div>
              <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
              <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
              <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
              <div class="txt-menu"></div>
              <div class="txt-menu btn-group">
                <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false"></i>
                <ul class="dropdown-menu">
                  <li><a href="#">不感兴趣</a></li>
                </ul>
              </div>
            </div>
            <!-- // 底部菜单 -->
            <!-- 评论框 -->
            <div class="comment-box box-wrap">
              <!-- 统计和菜单 -->
              <div class="comment-stats">
                <div class="title">8条评论</div>
                <div class="menu"><i class="glyphicon glyphicon-random"></i>切换为时间顺序</div>
              </div>
              <!-- // 统计和菜单 -->
              <!-- 评论列表 -->
              <div class="comment-ls">
                <div class="comment-item">
                  <div class="header">
                    <div class="user-info">
                      <img class="avater" src="/assets/home/qa/user_head.jpg" alt="">
                      <strong class="uname">用户昵称</strong>
                    </div>
                    <div class="time">2小时前</div>
                  </div>
                  <div class="body">
                    不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                  </div>
                  <div class="footer">
                    <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                    <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                    <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                    <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                  </div>
                  <!-- 输入框 -->
                  <form class="form-horizontal comment-publish">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  <!-- // 输入框 -->
                </div>
                <div class="comment-item">
                  <div class="header">
                    <div class="user-info">
                      <img class="avater" src="/assets/home/qa/user_head.jpg" alt="">
                      <strong class="uname">用户昵称</strong>
                    </div>
                    <div class="time">2小时前</div>
                  </div>
                  <div class="body">
                    不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                  </div>
                  <div class="footer">
                    <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                    <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                    <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                    <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                  </div>
                  <!-- 输入框 -->
                  <form class="form-horizontal comment-publish hidden">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  <!-- // 输入框 -->
                </div>
                <div class="comment-item">
                  <div class="header">
                    <div class="user-info">
                      <img class="avater" src="/assets/home/qa/user_head.jpg" alt="">
                      <strong class="uname">用户昵称</strong>
                    </div>
                    <div class="time">2小时前</div>
                  </div>
                  <div class="body">
                    不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                  </div>
                  <div class="footer">
                    <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                    <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                    <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                    <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                  </div>
                  <!-- 输入框 -->
                  <form class="form-horizontal comment-publish hidden">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  <!-- // 输入框 -->
                </div>
                <div class="comment-item reply">
                  <div class="header">
                    <div class="user-info">
                      <img class="avater" src="/assets/home/qa/user_head.jpg" alt="">
                      <strong class="uname">用户昵称</strong>
                    </div>
                    <div class="time">2小时前</div>
                  </div>
                  <div class="body">
                    不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                  </div>
                  <div class="footer">
                    <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                    <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                    <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                    <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                  </div>
                  <!-- 输入框 -->
                  <form class="form-horizontal comment-publish hidden">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  <!-- // 输入框 -->
                </div>
                <div class="comment-item">
                  <div class="header">
                    <div class="user-info">
                      <img class="avater" src="/assets/home/qa/user_head.jpg" alt="">
                      <strong class="uname">用户昵称</strong>
                    </div>
                    <div class="time">2小时前</div>
                  </div>
                  <div class="body">
                    不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                  </div>
                  <div class="footer">
                    <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                    <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                    <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                    <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                  </div>
                  <!-- 输入框 -->
                  <form class="form-horizontal comment-publish hidden">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  <!-- // 输入框 -->
                </div>
                <div class="comment-item">
                  <div class="header">
                    <div class="user-info">
                      <img class="avater" src="/assets/home/qa/user_head.jpg" alt="">
                      <strong class="uname">用户昵称</strong>
                    </div>
                    <div class="time">2小时前</div>
                  </div>
                  <div class="body">
                    不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                  </div>
                  <div class="footer">
                    <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                    <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                    <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                    <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                  </div>
                  <!-- 输入框 -->
                  <form class="form-horizontal comment-publish hidden">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  <!-- // 输入框 -->
                </div>
              </div>
              <!-- // 评论列表 -->
              <!-- 发表评论 -->
              <form class="form-horizontal comment-publish">
                <input type="text" class="form-control" placeholder="写下你的评论...">
                <button type="button" class="btn btn-default btn-grey">发布</button>
              </form>
              <!-- // 发表评论 -->
            </div>
            <!-- // 评论框 -->
          </div>
          <!-- // 回答内容区域 -->

          <a class="link-more" href="#">查看全部 6,660 个回答</a>
        </div>
         {% endif %}
        <div class="col-md-3 right-content">
          <!-- 关于作者 -->
          <div class="about-user box-wrap">
            <div class="user-info">
              <div class="avater">
                <img src="/assets/home/qa/user_head.jpg" alt="用户头像">
              </div>
              <div class="desc">
                <h4>舒大克</h4>
                <p>《互联网营销人实战手记》新书上市； 公众号：舒大克。</p>
              </div>
            </div>
            <!-- 用户统计 -->
            <div class="qa-stats">
              <div>
                <span>回答</span>
                <strong>309</strong>
              </div>
              <div>
                <span>文章</span>
                <strong>40</strong>
              </div>
              <div>
                <span>关注者</span>
                <strong>85,265</strong>
              </div>
            </div>
            <!-- // 用户统计 -->
            <div class="menu-ls">
              <div>
                <a href="#" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-plus"></i>关注他</a>
              </div>
              <div>
                <a href="#" class="btn btn-default btn-sm btn-grey"><i class="glyphicon glyphicon-comment"></i>发私信</a>
              </div>
            </div>
          </div>
          <!-- //关于作者 -->
          <!-- 相关问题 -->
          <div class="rel-ques box-wrap">
            <div class="title">相关问题</div>
            <div class="rel-que-ls">
              <div>
                <a href="#">疫情过后，你会报复性消费吗？</a><span>30 个回答</span>
              </div>
              <div>
                <a href="#">疫情过后你最想去哪？和谁一起？</a><span>19 个回答</span>
              </div>
              <div>
                <a href="#">如果能熬过这波疫情，你最想做的事情是什么？</a><span>21 个回答</span>
              </div>
              <div>
                <a href="#">请问这次疫情可能有积极影响吗？</a><span>9 个回答</span>
              </div>
              <div>
                <a href="#">如果疫情结束了你最想做什么？</a><span>3 个回答</span>
              </div>
            </div>
          </div>
          <!-- //相关问题 -->
          <!-- 右侧页脚 -->
          <div class="right-footer">
            <a href="#">用户指南</a><span class="dot">·</span>
            <a href="#">用户使用协议</a><span class="dot">·</span>
            <a href="#">用户隐私权政策</a>
            <br />
            <a href="#">侵权举报</a><span class="dot">·</span>
            <a href="#">网上有害信息举报专区</a>
            <br />
            <a href="#">京ICP证 第10001000号</a>
            <br />
            <a href="#">京ICP备 第10001000号</a>
            <br />
            <a href="#">联系我们 &copy; 2020在线问答</a>
          </div>
          <!-- //右侧页脚 -->
        </div>
      </div>
    </div>
  </div>
  <div class="layout-footer">
    <a href="#" data-toggle="tooltip" title="意见反馈"><i class="glyphicon glyphicon-briefcase"></i></a>
    <a href="#" data-toggle="tooltip" title="回到顶部"><i class="glyphicon glyphicon-arrow-up"></i></a>
  </div>
  <!-- 写回答，对话框 -->
  <div class="modal fade" id="addComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <form class="form-horizontal modal-dialog" role="document" method="post" action="{{ url_for('qa.detail',q_id=question.id) }}">
        {{ form.csrf_token }}
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">写回答</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
{#              添加富文本的内容#}
              {{ form.content }}
              {{ ckeditor.load() }}
              {{ ckeditor.config(name='content') }}
{#            <textarea class="form-control" rows="10" placeholder="请输入正文"></textarea>#}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </div>
    </form>
  </div>
  <!-- // 写回答，对话框 -->

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="/assets/plugins/jquery-3.4.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()

      // 内容显示与收起
      $('.show-all').click(function () {
        $(this).addClass('hidden');
        $('.show-desc').removeClass('hidden');
      })
      $('.show-desc').click(function () {
        $(this).addClass('hidden');
        $('.show-all').removeClass('hidden');
      })
    })
  </script>
</body>

</html>